<template>
  <div>
    <dlsHeader :type="2"
               :Data="headerData" :keyword="keyword" :keywordClick="keywordClick"></dlsHeader>
    <div class="item-card"></div>
    <!-- 定制 浙江行动者 生日时间筛选 start -->
    <date-search @SearchData='SearchData' v-if="is_dz_zjxdz"></date-search>
    <!-- 定制 浙江行动者 生日时间筛选 end -->
    <form action v-on:submit.prevent>
      <search-box @search="search" :placeholder="Placeholder" v-model="keyword"></search-box>
    </form>
    <div class="user-list"
         v-show="list.length">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                :immediate-check="immediateCheck"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
             :key="index"
             class="item clearfix">
          <div class="levelimg fl">
            <img :src="item.headimgurl||defaultPhotoImg"
                 width="100%"
                 alt />
          </div>
          <div class="levelinfo fl">
            <p v-if="item.nickname">
              <span>昵称：</span>
              <span>{{item.nickname}}</span>
            </p>
            <p v-if="item.user_id">
              <span>用户ID：</span>
              <span>{{item.user_id}}</span>
            </p>
            <p v-if="item.mobile && is_hide_member_phone == 0">
              <span>手机：</span>
              <span>{{item.mobile}}</span>
            </p>
            <p v-if="item.country || item.province || item.city">
              <span>地区：</span>
              <span>{{item.country}}{{item.province}}{{item.city}}</span>
            </p>
            <p v-if="item.rank_name">
              <span>级别：</span>
              <span>{{item.rank_name}}</span>
            </p>
            <p v-if="item.create_time">
              <span>时间：</span>
              <span>{{item.create_time}}</span>
            </p>
            <p v-if="item.director">
              <span>上级：</span>
              <span>{{item.director}}</span>
            </p>
            <p v-if="item.rank_title">
              <span>等级：</span>
              <span>{{item.rank_title}}</span>
            </p>
            <!-- 定制 浙江行动者 生日、积分 start -->
            <template v-if="is_dz_zjxdz">
              <p>
                <span>生日：</span>
                <span>{{item.birthday?item.birthday:'--'}}</span>
              </p>
              <p>
                <span>积分：</span>
                <span>{{item.integral}}</span>
              </p>
            </template>
            <!-- 定制 浙江行动者 生日、积分 end -->
          </div>
        </div>
      </van-list>
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import noData from '@/components/noData/index'
import dlsHeader from '@/views/user/dls/components/dlsHeader/index'
import { getNextLevelAgencyUser } from '@/api/user/dls/dlsApi'
import dateSearch from './components/dateSearch/index'
import searchBox from '@/views/user/components/search/index'

export default Vue.extend({
  data() {
    return {
      Placeholder: '请输入昵称/ID/手机号进行搜索',
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      noData: {
        text: '暂无会员',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_user_data.png',
        marginTop: '1.6em'
      },
      is_hide_member_phone: undefined,
      headerData: {
        commission_name: '',
        total_commissions: '',

        show_dl_product: false,
        agent_item_count: '',
        agent_item_name: '',

        show_dl_agencies: false,
        agency_total: '',
        ftitle_agencies: '',

        show_dl_agency_user: false,
        agency_user_total: '',
        ftitle_agency_user: '',

        show_dl_agency_order: false,
        agency_order_total: '',
        ftitle_agency_order: ''
      },

      p: 1,
      keyword: '',
      keywordClick: 0,
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      list: [],
      is_dz_zjxdz: 0
    }
  },
  created() {
    this.init()
  },
  mounted() {
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      this.finished = false
      this.p = 1
      this.list = []
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    },
    search(e) {
      this.p = 1
      this.keyword = e
      this.finished = false
      this.list = []
      this.keywordClick++
      this.init()
    },
    onLoad() {
      if (this.finished) return false
      const data = {
        p: this.p,
        keyword: this.keyword
      }
      getNextLevelAgencyUser(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          // 定制 浙江行动者
          this.is_dz_zjxdz = res.data.is_dz_zjxdz
          this.is_hide_member_phone = res.data.is_hide_member_phone
          if (data.p == 1) {
            // 头部和导航数据
            this.headerData.commission_name = res.data.commission_name
            this.headerData.total_commissions = res.data.total_commissions
            // 代理产品
            this.headerData.show_dl_product = res.data.show_dl_product
            this.headerData.agent_item_count = res.data.agent_item_count
            this.headerData.agent_item_name = res.data.agent_item_name
            // 代理商
            this.headerData.show_dl_agencies = res.data.show_dl_agencies
            this.headerData.agency_total = res.data.agency_total
            this.headerData.ftitle_agencies = res.data.ftitle_agencies

            // 会员
            this.headerData.show_dl_agency_user = res.data.show_dl_agency_user
            this.headerData.agency_user_total = res.data.agency_user_total
            this.headerData.ftitle_agency_user = res.data.ftitle_agency_user
            // 订单
            this.headerData.show_dl_agency_order = res.data.show_dl_agency_order
            this.headerData.agency_order_total = res.data.agency_order_total
            this.headerData.ftitle_agency_order = res.data.ftitle_agency_order
          }
          // 列表
          this.list.push(...res.data.user_list)
          if (res.data.user_list.length < 10) {
            this.finished = true
          } else {
            this.p++
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 时间查找
    SearchData(startData, endDate) {
      this.startData = startData
      this.endDate = endDate
      const data = {
        search_start_time: startData,
        search_end_time: endDate,
        p: 1
      }
      this.list = []
      this.$loadingWrap.show()
      getNextLevelAgencyUser(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.is_hide_member_phone = res.data.is_hide_member_phone
          if (data.p == 1) {
            // 头部和导航数据
            this.headerData.commission_name = res.data.commission_name
            this.headerData.total_commissions = res.data.total_commissions
            // 代理产品
            this.headerData.show_dl_product = res.data.show_dl_product
            this.headerData.agent_item_count = res.data.agent_item_count
            this.headerData.agent_item_name = res.data.agent_item_name
            // 代理商
            this.headerData.show_dl_agencies = res.data.show_dl_agencies
            this.headerData.agency_total = res.data.agency_total
            this.headerData.ftitle_agencies = res.data.ftitle_agencies

            // 会员
            this.headerData.show_dl_agency_user = res.data.show_dl_agency_user
            this.headerData.agency_user_total = res.data.agency_user_total
            this.headerData.ftitle_agency_user = res.data.ftitle_agency_user
            // 订单
            this.headerData.show_dl_agency_order = res.data.show_dl_agency_order
            this.headerData.agency_order_total = res.data.agency_order_total
            this.headerData.ftitle_agency_order = res.data.ftitle_agency_order
            // 定制 浙江行动者
            this.is_dz_zjxdz = res.data.is_dz_zjxdz
          }
          // 列表
          this.list.push(...res.data.user_list)
          if (res.data.user_list.length < 10) {
            this.finished = true
          } else {
            this.p++
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  components: {
    dlsHeader,
    noData,
    dateSearch,
    searchBox
  }
})
</script>

<style lang="scss">
@import "src/styles/user/cardList/index.scss";
</style>
